<script lang="ts" setup>
import { injectState } from "../state";
import { onBeforeUnmount } from "vue";
import createNodeDialog from "./create-node-dialog.vue";
import {
	whManagerBsTbRiskHazardsStdGetPageUsingPost,
	whManagerBsTbRiskHazardsStdDeleteByIdIdUsingPost,
} from "@/genapi/wh";
import { createState } from "../state";

import bus from "vue3-eventbus";

defineOptions({ name: "Filters" });

bus.on("updateTreeData", (val) => {
	getTreeData();
});

const { createNodeDialogRef } = createState();

const {
	filter,
	page: { isLoading },
} = injectState()!;

const initial = { ...toRaw(filter.value) };
const data = ref({ ...initial });

const selectNode = (node: any) => {
	data.value.stdId = node.id;
	filter.value = { ...toRaw(data.value) };
};

const search = () => {
	filter.value = { ...toRaw(data.value) };
};

const reset = () => {
	data.value = { ...initial };
};

interface Tree {
	id: number;
	name: string;
	children?: Tree[];
}

const defaultProps = {
	children: "children",
	label: "name",
};

const dataSource = ref<Tree[]>([]);

let id = 1000;

const remove = async (node: Node, data: Tree) => {
	await ElMessageBox.confirm(
		`您即将删除【${data.name ?? "未知"}】，删除后不可恢复，是否确认删除？`,
		{
			type: "error",
			title: "提示",
		},
	);
	await whManagerBsTbRiskHazardsStdDeleteByIdIdUsingPost({
		path: { id: String(data.id!) },
	});
	ElMessage.success("删除成功");
	getTreeData();
};

const getTreeData = async () => {
	let res = await whManagerBsTbRiskHazardsStdGetPageUsingPost({
		data: {
			size: 999,
			current: 1,
			query: {},
		},
	});
	dataSource.value = handleTreeData(res?.data?.records ?? [], null);
	console.log;
};

const handleTreeData = (data: any, parent: any) => {
	let parentId = parent ? parent.id : null;
	let treeData = data.filter((item: any) => {
		return item.parentId === parentId;
	});
	if (treeData.length > 0) {
		treeData.forEach((item: any) => {
			item.children = handleTreeData(data, item);
		});
	} else {
		return treeData;
	}
	console.log(treeData);
	return treeData;
};

onMounted(async () => {
	await getTreeData();
	search(dataSource.value[0]);
});

onBeforeUnmount(() => {
	bus.off("updateTreeData");
});
</script>

<template>
	<div flex="col">
		<span text="18px" font="bold">重大事故隐患排查标准</span>
		<el-tree
			style="min-width: 400px; margin-top: 20px"
			:data="dataSource"
			show-checkbox
			node-key="id"
			default-expand-all
			:expand-on-click-node="false"
			:props="defaultProps"
			@node-click="selectNode"
		>
			<template #default="{ node, data }">
				<span class="custom-tree-node" w="100%" flex="~ justify-between">
					<span>{{ data.name }}</span>
					<span>
						<a @click="createNodeDialogRef?.trigger('write', data, true)">
							添加
						</a>
						<a
							style="margin-left: 8px"
							@click="createNodeDialogRef?.trigger('write', data, false)"
						>
							编辑
						</a>
						<a
							style="margin-left: 8px"
							@click="remove(node, data)"
							v-if="data.parentId"
						>
							删除
						</a>
					</span>
				</span>
			</template>
		</el-tree>
		<!-- <el-button type="primary" :loading="isLoading" @click="search">
			<template #icon>
				<el-icon class="i-custom:search" />
			</template>
			查询
		</el-button> -->
		<createNodeDialog ref="createNodeDialogRef"></createNodeDialog>
		<!-- <el-form class="filter-form" inline :model="data" :disabled="isLoading">
			<el-form-item label="文章类型" prop="文章类型">
				<el-select-v2
					v-model="data.articleType"
					clearable
					class="w-240px!"
					:options="ARTICLE_TYPE_OPTIONS"
					placeholder="请选择文章类型"
				/>
			</el-form-item>

			<el-form-item>
				<el-divider direction="vertical" h="32px!" m="r-22px!" />
				<el-button type="primary" :loading="isLoading" @click="search">
					<template #icon>
						<el-icon class="i-custom:search" />
					</template>
					查询
				</el-button>
				<el-button @click="reset">
					<template #icon>
						<el-icon class="i-custom:reset" />
					</template>
					重置
				</el-button>
			</el-form-item>
		</el-form> -->
	</div>
</template>
